// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        minTop: {
            type: cc.Integer,
            default: 100,
        },
        maxTop: {
            type: cc.Integer,
            default: 100,
        },
        minBottom: {
            type: cc.Integer,
            default: 100,
        },
        maxBottom: {
            type: cc.Integer,
            default: 100,
        },

        canvasNode: {
            type: cc.Node,
            default: null,
        },

        topLayout: {
            type: cc.Node,
            default: null,
        },

        centerLayout: {
            type: cc.Node,
            default: null
        },

        bottomLayout: {
            type: cc.Node,
            default: null
        }
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
    },

    getValue(from, to, fromValue, toValue, fraction) {
        if (to == from) {
            return toValue;
        }
        return fromValue + (fraction - from) / (to - from) * (toValue - fromValue);
    },

    start() {
        let widget = this.node.addComponent(cc.Widget);
        widget.top = 0;
        widget.bottom = 0;
        widget.left = 0;
        widget.right = 0;

        this.layout();
    },

    onFocusInEditor() {
        this.layout();
    },

    layout() {
        let frameSize = cc.director.getOpenGLView().getFrameSize();
        let rate = frameSize.height / frameSize.width;

        if(rate < 16 / 9){
            cc.log("rate is smale than 16 / 9, not compate layout");
            return;
        }

        cc.log(`weichaohui screen width:${frameSize.width}  screen height:${frameSize.height} rate:${rate}`);

        this.node.height = this.node.width * rate;

        let top = this.getValue(16 / 9, 18 / 9, this.minTop, this.maxTop, rate);
        let bottom = this.getValue(16 / 9, 18 / 9, this.minBottom, this.maxBottom, rate);

        cc.log("background height:" + this.node.height);


        this.top = top;
        this.bottom = bottom;

        if (this.topLayout) {
            this.topLayout.height = this.top;
            cc.log("top height:" + this.topLayout.height);
            this.topLayout.y = this.node.height * (1 - this.node.anchorY) - this.topLayout.height * (1 - this.topLayout.anchorY);
        }

        if (this.centerLayout) {
            this.centerLayout.height = this.node.height - this.top - this.bottom;
            cc.log("center height:" + this.centerLayout.height);
            this.centerLayout.y = this.node.height * (1 - this.node.anchorY) - this.top - this.centerLayout.height * (1 - this.centerLayout.anchorY);
        }

        if (this.bottomLayout) {
            this.bottomLayout.height = this.bottom;
            cc.log("bottom height:" + this.bottomLayout.height);
            this.bottomLayout.y = -(this.node.height * this.node.anchorY - this.bottomLayout.height * this.bottomLayout.anchorY);
        }
    },

    update(dt) {
        // this.layout();
    },
});
